<template>
    <div class="age-range-list-page">
        <el-card shadow="never" class="filter">
            <el-form inline ref="form" :model="form">
                <el-form-item label="邮箱/用户名" prop="keyword">
                    <el-input v-model="form.keyword" placeholder="请输入邮箱/用户名"></el-input>
                </el-form-item>
                <el-form-item label="订单创建时间">
                    <el-date-picker
                        v-model="createdAt"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd HH:mm"
                        value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="订单状态" prop="status">
                    <el-select v-model="form.status" placeholder="请输入" @change="onSubmit">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="onResetForm">重置</el-button>
            </el-form>
        </el-card>
        <el-card shadow="never" class="mt-4">
            <div class="mt-4" v-loading="loading">
                <el-button type="primary" @click="onExport">导出</el-button>
                <el-table :data="data">
                    <el-table-column align="center" label="序号" type="index" width="50" />
                    <el-table-column align="center" label="用户名称" prop="name"></el-table-column>
                    <el-table-column align="center" label="用户邮箱" prop="email"></el-table-column>
                    <el-table-column align="center" label="订单金额" prop="amount"></el-table-column>
                    <el-table-column align="center" label="订单状态">
                        <template slot-scope="{row}">
                            {{ row.status === 1 ? '未支付' : '交易成功' }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="创建时间">
                        <template slot-scope="{row}">
                            {{ timeFormat(row.created_at) }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <pagination
                    ref="pagination"
                    :currentPage="form.page"
                    :pageSize="form.size"
                    :handleCurrentChange="onPageChange"
                    :handlePageSizeChange="onPageChange"
                    :totalElements="totalElements"
                ></pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Pagination from '@/components/base/Pagination';
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
        Pagination,
    },
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 50,
                startAt: '',
                endAt: '',
                keyword: '',
                status: '',
            },
            createdAt: '',
            options: [
                { label: '未支付', value: 1 },
                { label: '交易成功', value: 2 },
            ],
            totalElements: 0,
        };
    },
    watch: {
        createdAt(val) {
            if (val) {
                this.form.startAt = val[0];
                this.form.endAt = val[1];
            } else {
                this.form.startAt = '';
                this.form.endAt = '';
            }
            this.fetchData();
        },
    },
    methods: {
        onExport() {
            $ele.$confirm('是否导出订单信息', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                const url = 'order/export';
                let query = '';
                for (const key in this.form) {
                    if (key) {
                        query += `${key}=${this.form[key]}&`;
                    }
                }
                window.location.href = `${process.env.VUE_APP_API_PREFIX}${url}?${query}`;
            }).catch(() => { });
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetForm() {
            this.createdAt = '';
            this.$refs.form.resetFields();
            this.onSubmit();
        },
        onPageChange(val, text) {
            if (text) {
                this.form.size = val;
                this.form.page = 1;
            } else {
                this.form.page = val;
            }
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('order', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => this.loading = false);
        },
        timeFormat(time) {
            return time ? new TimeFormats().convertTime('', time) : '';
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.age-range-list-page {
    .filter {
        .input-width {
            max-width: 300px;
        }
    }
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
